<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>机构信息核审</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" ref="formInline" class="paper-search" style="margin-top: 20px" >
            <el-form-item label="搜索：" prop="orgName">
                <el-input  size="mini" v-model="formInline.orgName" placeholder="输入关键字"/>
            </el-form-item>
            <el-form-item prop="busiType">
                <el-select style="width: 100px" size="small" v-model="formInline.busiType" placeholder="行业类别">
                    <el-option
                            v-for="item in busiTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="orgType">
                <el-select style="width: 100px" size="mini" v-model="formInline.orgType" placeholder="企业类别">
                    <el-option
                            v-for="item in orgTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="status">
                <el-select style="width: 100px" size="mini" v-model="formInline.status" placeholder="审核状态">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="date">
                <el-date-picker
                        size="mini"
                        v-model="formInline.date"
                        align="right"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        placeholder="选择开始日期"
                        :picker-options="pickerOptions"
                        :rules="[{required: true, message: '请输入日期', trigger: 'change' }]">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button size="mini" @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button size="mini" type="primary" round icon="el-icon-search" @click="">审核完成</el-button>
        <el-table
                v-loading="loading"
                tooltip-effect="dark"
                stripe
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                :cell-style="cellStyle"
                :header-cell-style="headerCellStyle"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="orgName"
                    label="机构名"
                    width="220"
                    sortable
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="提交时间"
                    width="110"
                    show-overflow-tooltip
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审核状态"
                    width="100"
                    sortable>
                <template slot-scope="scope">
                    {{scope.row.status === '0' ? '未通过' : ''}}
                    {{scope.row.status === '1' ? '待审核':''}}
                    {{scope.row.status === '2' ? '通过' : ''}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="checkTime"
                    label="审核时间"
                    width="150"
                    show-overflow-tooltip
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    width="220"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <!--查看问卷信息-->
                    <el-button
                            size="small"
                            icon="el-icon-search"
                            @click="queryOrg(scope.row.orgId)">
                        点击审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                style="float: right;margin-right: 30px;margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
        </el-pagination>


    </div>
</template>

<script>
    import {fuzzyCheck, orgCheck} from "../../../api/orgBaseMG";

    export default {
        name: "get-check-list",
        data() {
            return {
                loading: true,
                value1: true,
                tableData: [],
                multipleSelection: [],

                //单选框-机构类别
                orgTypeOptions: [{
                    value: '1',
                    label: '国有'
                }, {
                    value: '2',
                    label: '私营'
                },{
                    value: '3',
                    label: '独资'
                },{
                    value: '3',
                    label: '合资'
                }],

                //单选框-行业类别
                busiTypeOptions: [{
                    value: '1',
                    label: '制造业'
                },{
                    value: '2',
                    label: '建筑业'
                },{
                    value: '3',
                    label: '服务业'
                }],

                //单选框-问卷状态
                statusOptions: [{
                    value: '1',
                    label: '待审核'
                }, {
                    value: '0',
                    label: '审核未通过'
                },{
                    value: '2',
                    label: '审核完成'
                }],

                //搜索问卷信息对象
                formInline: {
                    orgName: '',
                    status: '',
                    date:[],
                    startTime: '',
                    endTime: '',
                    busiType:'',
                    orgType:''
                },

                //选择日期
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //分页
                currentPage:1, //初始页
                pagesize:10,    //每页的数据

            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //表格单元格样式设计 --wzr 20210418
            headerCellStyle() {
                return "text-align: center;";
            },
            cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
                let cellStyle;
                //指定列
                if (columnIndex === 5) {

                }
                switch (row.status) {
                    case '2':
                        cellStyle = 'background: #f0f9eb;text-align: center';
                        break;
                    case '0':
                        cellStyle = 'background: oldlace;text-align: center';
                        break;
                    default:
                        cellStyle = 'text-align: center';
                }
                return cellStyle;

            },

            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },

            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //查询待审核机构
            search: function () {
                this.formInline.startTime = this.formInline.date[0];
                this.formInline.endTime = this.formInline.date[1];
                fuzzyCheck(this.formInline).then(res => {

                    if (res.code === 200) {
                        this.loading = false;
                        this.tableData = res.data;
                    }
                    console.log("this.tableData.status=>", this.tableData.status);
                    //转换 0-成功 1-审核中 2-失败
                    if (this.tableData.status === '2') {
                        this.tableData.status = '审核未通过';
                        console.log(" this.tableData.status=>", this.tableData.status);
                    }
                    if (this.tableData.status === '1') {
                        this.tableData.status = '未审核';
                        console.log(" this.tableData.status=>", this.tableData.status);
                    }
                    this.loading = false;

                })
            },

            //审核内容
            queryOrg(orgId) {
                console.log("=============>",orgId);
                orgCheck(orgId).then(res=>{
                    console.log("企业数据=====>",res);
                    window.localStorage.setItem('ORG_INFO', JSON.stringify(res.data));
                    this.$router.push({name:"Check",params:res.data})
                });
            },
        },

        created() {
            this.search();
        }

    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>